<template>
    <div class="city_container">
        <head-top :head-title="cityname" go-back='true'>
            <router-link to="/home" slot="changecity" class="change_city">切换城市</router-link>
        </head-top>
        <form class="city_form" v-on:submit.prevent>
            <div>
                <input type="search" name="city" placeholder="输入学校、商务楼、地址" class="city_input input_style" required v-model="inputValue">
            </div>
            <div>
                <input type="submit" name="submit" class="city_submit input_style" @click='postpois' value="提交">
            </div>
        </form>
        <header v-if="historytitle" class="pois_search_history">搜索历史</header>
        <ul class="getpois_ul">
            <li v-for="(item ,index) in placelist" @click='nextpage(index, item.geohash)' :key="index">
                <h4 class="pois_name ellipsis">{{item.name}}</h4>
                <p class="pois_address ellipsis">{{item.address}}</p>
            </li>
        </ul>
        <footer v-if="historytitle&&placelist.length" class="clear_all_history" @click="clearAll">清空所有</footer>
        <div class="search_none_place" v-if="placeNone">很抱歉！无搜索结果</div>
    </div>
</template>

<script>
import headTop from 'src/components/header/head'
import { currentcity, searchplace } from 'src/service/getData'
import { getStore, setStore, removeStore } from 'src/config/mUtils'

export default {
    data() {
        return {
            inputValue: '',      //搜索地址
            cityid: '',          //当前城市id
            cityname: '',        //搜索城市名字
            placelist: [],       //搜索城市列表
            placeHistory: [],    //历史搜索记录
            historytitle: true,  //默认显示搜索历史头部，点击搜索后隐藏
            placeNone: false     //搜索无结果，显示提示信息
        }
    },

    mounted() {
        this.cityid = this.$route.params.cityid;
        console.log(this.cityid);
        currentcity(this.cityid).then(res => {
            console.log(res);
            this.cityname = res.name;
        })
        this.initData();
    },

    components: {
        headTop
    },

    computed: {

    },

    methods: {
        initData() {
            //获取搜索历史记录
            if (getStore('placeHistory')) {
                this.placelist = JSON.parse(getStore('placeHistory'));
            } else {
                this.placelist = [];
            }
        },
        //发送搜索信息inputValue
        postpois() {
            //输入值不为空时才发送信息
            if (this.inputValue) {
                searchplace(this.cityid, this.inputValue).then(res => {
                    this.historytitle = false;
                    this.placelist = res;
                    this.placeNone = res.length ? false : true;
                })
            }
        },
        /**
         * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
         * 如果没有则新增，如果有则不做重复存储，判断完成后进入下一页
         */
        nextpage(index, geohash) {
            let history = getStore('placeHistory');
            let choosePlace = this.placelist[index];
            console.log(history);
            if (history) {
                let checkrepeat = false;
                this.placeHistory = JSON.parse(history);
                this.placeHistory.forEach(item => {
                    if( item.geohash == geohash ) {
                        checkrepeat = true;
                    }
                })
                if(!checkrepeat) {
                    this.placeHistory.push(choosePlace)
                }
            }else {
                this.placeHistory.push(choosePlace)
            }
            setStore('placeHistory', this.placeHistory);
    
            this.$router.push({
                path: '/msite',
                query: { geohash }
            })
        } ,
        clearAll(){
            removeStore('placeHistory');
            this.initData();
        }
    }
}

</script>

<style lang="scss" scoped>
@import 'src/style/mixin'; //@include sc()  字体大小，颜色
//@include wh()  宽高
//@include ct    定位上下居中
//@include cl    定位左右居中
//@include center定位上下左右居中
//@include bis($url) 背景图片地址和大小
//@include allcover   定位全屏
//@include  font  字体大小、行高、字体
//@include  fj   flex布局和子元素对齐方式
.city_container {
    padding-top: 2.35rem;
}

.change_city {
    right: 0.4rem;
    @include sc(0.6rem, #fff);
    @include ct;
}

.city_form {
    background-color: #fff;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-top: 0.4rem;
    div {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        .input_style {
            border-radius: 0.1rem;
            margin-bottom: 0.4rem;
            @include wh(100%, 1.4rem);
        }
        .city_input {
            border: 1px solid $bc;
            padding: 0 0.3rem;
            @include sc(0.65rem, #333);
        }
        .city_submit {
            background-color: $blue;
            @include sc(0.65rem, #fff);
        }
    }
}

.pois_search_history {
    border-top: 1px solid $bc;
    padding-left: 0.5rem;
    border-bottom: 1px solid $bc;
    @include font(0.475rem, 0.8rem);
}

.getpois_ul {
    background-color: #fff;
    border-top: 1px solid $bc;
    li {
        margin: 0 auto;
        padding-top: 0.65rem;
        border-bottom: 1px solid $bc;
        .pois_name {
            margin: 0 auto 0.35rem;
            width: 90%;
            @include sc(0.65rem, #333);
        }
        .pois_address {
            margin: 0 auto 0.55rem;
            width: 90%;
            @include sc(0.65rem, #999);
        }
    }
}
.search_none_place {
    margin: 0 auto;
    @include font(0.65rem, 1.75rem);
    color: #333;
    background-color: #fff;
    text-indent: 0.5rem;
}
.clear_all_history {
    @include sc(0.7rem, #666);
    text-align: center;
    line-height: 2rem;
    background-color: #fff;
}
</style>
